import React, { useState } from 'react';
import './index.less'
interface ComparisonProps {
  /**
   * 之前图片地址
   */
  beforeImage: string
  /**
   * 之后图片
   */
  afterImage: string
  style?: React.CSSProperties
  className?: string

  disabled?: boolean
  lineWidth?:number
  styles?: {
    image: React.CSSProperties
  }
}
const Comparison = ({ disabled, beforeImage,lineWidth = 2, afterImage, className = '', styles, style }: ComparisonProps) => {
  const [width, setWidth] = useState(50);
  const { image } = styles || {}
  const onChange = (e: any) => {
    setWidth(+e.target.value)
  }
  return (<div className={`comparison-container ${className}`} style={style}>
    <div className='before-imgage-box'>
      <img style={image} src={beforeImage} />
    </div>
    <div className='after-image-box' style={{
      clipPath: `polygon(${width}% 0px, 100% 0px, 100% 100%, ${width}% 100%)`
    }}>
      <img style={image} src={afterImage} />
    </div>
    <div style={{
      width:`${lineWidth}px`,
      left: `calc(${width}% - ${lineWidth-1}px)`
    }} className='comparison-image-line'></div>
    {
      disabled ? null : <input value={width} onChange={onChange} type="range" step={0.01} min={0} max={100} className='comparison-image-slider' />

    }
  </div>)
}
export default Comparison